//  offsetHeight the element height,


var small_img = document.getElementsByClassName('small_img')[0]
var distinct = document.getElementsByClassName('distinct')[0]
var big_img = document.getElementsByClassName('big_img')[0]



// 鼠标进入small_img
small_img.onmouseenter = function() {
    // 让big_img显示
    big_img.style.display = 'block'
    // 让distinct显示
    distinct.style.display = 'block'

}

small_img.onmouseleave = function() {
    // 让big_img显示
    big_img.style.display = 'none'
    // 让distinct隐藏
    distinct.style.display = 'none'
}



small_img.onmousemove = function (e) {
    // 清楚鼠标的实际位置
    mouse_y = e.clientY - distinct.offsetHeight/ 2
    mouse_x = e.clientX - distinct.offsetWidth/2

    if (mouse_y < 0) {
        mouse_y =0
    };
    if (mouse_x < 0) {
        mouse_x = 0
    }

    if (mouse_y >small_img.offsetHeight-distinct.offsetHeight) {
        mouse_y = small_img.offsetHeight - distinct.offsetHeight
    }
    if (mouse_x>small_img.offsetWidth-distinct.offsetWidth){
        mouse_x = small_img.offsetWidth - distinct.offsetWidth
    }
    distinct.style.left = mouse_x + 'px'
    distinct.style.top = mouse_y + 'px'

    big_img.style.backgroundPositionX = - mouse_x * 1.5 + 'px'
    big_img.style.backgroundPositionY = - mouse_y * 1.5 + 'px'
}
